// 无畏契约首图 详情图生成
import {
  getURLBase64Image,
  loadImages,
  drawBgBorder,
} from "./getUrlImg";

// 无畏契约 首图
export function makeTitleImgWWQY(data, list, attrs) {
  //console.log("%c Line:6 🍒 data", "color:#b03734", data);
  return new Promise(async (resolve, reject) => {
    // 取出已选择项
    let arr = [];
    let titleImgArr = []
    let sm = "";
    list = list.split(",");
    if (!list || list == []) {
      reject("多选不能为空");
    }
    if (list && list.length) {
      attrs.forEach(async (item1) => {
        if (item1.aavName == "f1") {
          item1.childAttributes.forEach(async (item2) => {
            if (item2.id == data.f1) {
              sm = item2.fieldName;
            }
          });
        }
        if (
          item1.fieldType == "checkbox" &&
          item1.isEnable === "0" &&
          item1.childAttributes &&
          item1.childAttributes.length
        ) {
          item1.childAttributes.forEach(async (item2) => {
            if (list.indexOf(String(item2.id)) > -1) {
              arr.push(item2);
              if(item1.aavName!='f30'&&item1.aavName!='f2'&&item1.aavName!='f31'&&item1.aavName!='f32'&&item1.aavName!='f33'){
                titleImgArr.push(item2)
              }
              
            }
          });
        }
      });
    }
    try {
      const mainBg = await getURLBase64Image(
        "https://imgage.maimaihao.com/makeImg/wuWeiQiYue/mainImgBg2.png"
      );
      //console.log("%c Line:40 🥝 mainBg", "color:#4fff4B", mainBg);
      const canvas = document.createElement("canvas");
      const context = canvas.getContext("2d");
      canvas.width = mainBg.width;
      canvas.height = mainBg.height;
      context.drawImage(mainBg, 0, 0, mainBg.width, mainBg.height);
      context.fillStyle = "#ffffff";
      // // 头部标题 店铺名
      // context.fillText(
      //   `${data.gameName || "--"}`,
      //   2560 / 2 - (data.gameName.length * 48) / 2,
      //   70
      // );
      // 左侧展示
      context.font = "bold 56px myFontruihei5";
      context.fillText(`编号: ${data.thirdId || "--"}`, 86, 278);
      context.fillText(`区服: ${data.groupName || "--"}`, 86, 368);
      context.fillText(`实名: ${sm || "--"}`, 86, 458);
      context.fillText(`等级: ${data.f23 ? data.f23 : "--"}`, 86, 548);
      context.fillText(`皮肤价值: ${data.f27 ? data.f27 : "--"}`, 86, 638);
      context.fillText(`已用源晶点: ${data.f34 ? data.f34 : "--"}`, 86, 728);
      context.fillText(`解锁英雄数: ${data.f35 ? data.f35 : "--"}`, 86, 818);
      //  加载皮肤图片
      context.fillStyle = "#fff";
      context.font = "25px Adobe Ming Std";
      let skinImgs = [];
      if (titleImgArr && titleImgArr.length) {
        titleImgArr.sort((a, b) => b.kz1 - a.kz1);
        skinImgs = await loadImages(titleImgArr, 35);
      } else {
        // 没有Sren
      }
      // .sort(sortBy("sort"))
      let instances = skinImgs.length ? skinImgs : [];

      if (instances && instances.length) {
        let img15 = instances.splice(0, 35);
        // 开始绘制
        // startX,startY,rowNum,borderImg,imgWidth1,imgHeight,stepY,stepX
        // 下载背景图
        let bg1 = await getURLBase64Image(
          "https://imgage.maimaihao.com/makeImg/wuWeiQiYue/skinbg1new.png"
        );
        let bg2 = await getURLBase64Image(
          "https://imgage.maimaihao.com/makeImg/wuWeiQiYue/skinbg2new.png"
        );
        let bg3 = await getURLBase64Image(
          "https://imgage.maimaihao.com/makeImg/wuWeiQiYue/skinbg3new.png"
        );
        let bg4 = await getURLBase64Image(
          "https://imgage.maimaihao.com/makeImg/wuWeiQiYue/skinbg4new.png"
        );
        let bg5 = await getURLBase64Image(
          "https://imgage.maimaihao.com/makeImg/wuWeiQiYue/skinbg5new.png"
        );

        let opts = {
          startX: 690,
          startY: 80,
          rowNum: 7,
          stepY: 16,
          stepX: 16,
          txtLineHeight: 60,
          imgWidth1: 244,
          imgHeight: 244,
          bgImgs: [bg1, bg2, bg3, bg4, bg5],
          txtInside:true
        };
        context.fillStyle = "#333";
        context.font = "bold 26px myFontruihei5";
        drawImagesAreaBg(context, img15, opts);
        // 绘制结束
        const base64Url = canvas.toDataURL("image/jpeg", 0.6);
        resolve(base64Url);
      } else {
        const base64Url = canvas.toDataURL("image/jpeg", 0.6);
        resolve(base64Url);
      }
    } catch (error) {
      reject(error);
    }
  });
}
// // 生成详情图-无畏契约 多图
// export async function makeDetailImgWWQY(data, skins, attrs) {
//   return new Promise(async (resolve, reject) => {
//     // 处理实名
//     let shimingList = attrs.filter((i) => {
//       return i.aavName == "f1";
//     });
//     let sm = "";
//     if (shimingList.length && data.f1) {
//       sm = shimingList[0].childAttributes.filter((i) => {
//         return i.id == data.f1;
//       });
//     }

//     data.sm = sm && sm.length ? sm[0].fieldName : "--";

//     // 定义一个整体图片的数组
//     let imgPageArr = [];
//     let commonIndex = 0; //定义一个全局的皮肤数
//     let imgNUm = -1; //图片页数  数量
//     let typeArrNum = -1; //每页图的分组数量
//     // 双重循环 遍历所有皮肤
//     for (let i = 0; i < skins.length; i++) {
//       // 遍历不同类型的皮肤
//       const typeMap = skins[i];
//       if (typeMap.list.length > 0) {
//         for (let j = 0; j < typeMap.list.length; j++) {
//           // 遍历到皮肤
//           let skin = typeMap.list[j];
//           // 本次遍历不绘制  只将每张图片的内容区分开
//           if (commonIndex === 0) {
//             typeArrNum = -1;
//             imgPageArr = [[]];
//             imgPageArr[0].push({
//               typeName: typeMap.name,
//               skins: [],
//             });
//             imgNUm++;
//             typeArrNum++;
//           }
//           if (commonIndex % 70 == 0 && commonIndex != 0) {
//             typeArrNum = -1;
//             imgPageArr.push([]);
//             imgPageArr[imgNUm + 1].push({
//               typeName: typeMap.name,
//               skins: [],
//             });
//             imgNUm++;
//             typeArrNum++;
//           } //每张图片展示70个皮肤

//           if (j == 0 && commonIndex % 70 != 0) {
//             // 分组开始  在分页中创建分组数组
//             imgPageArr[imgNUm].push({
//               typeName: typeMap.name,
//               skins: [],
//             });
//             typeArrNum++;
//           }
//           if (skin.imgUrl) {
//             imgPageArr[imgNUm][typeArrNum].skins.push(skin);
//           } else {
//             typeMap.list.splice(j, 1);
//             j--;
//             continue;
//           }
//           commonIndex++;
//         }
//       }
//     }
//     // 下载背景图
//     let bg1 = await getURLBase64Image(
//       "https://imgage.maimaihao.com/makeImg/wuWeiQiYue/skinbg1new.png"
//     );
//     let bg2 = await getURLBase64Image(
//       "https://imgage.maimaihao.com/makeImg/wuWeiQiYue/skinbg2new.png"
//     );
//     let bg3 = await getURLBase64Image(
//       "https://imgage.maimaihao.com/makeImg/wuWeiQiYue/skinbg3new.png"
//     );
//     let bg4 = await getURLBase64Image(
//       "https://imgage.maimaihao.com/makeImg/wuWeiQiYue/skinbg4new.png"
//     );
//     let bg5 = await getURLBase64Image(
//       "https://imgage.maimaihao.com/makeImg/wuWeiQiYue/skinbg5new.png"
//     );

//     // 绘制图片
//     let imgsArr = [];
//     if (imgPageArr && imgPageArr.length) {
//       for (let k = 0; k < imgPageArr.length; k++) {
//         let base64Img = await makeDetailImgWwqyOne(imgPageArr[k], data, [
//           bg1,
//           bg2,
//           bg3,
//           bg4,
//           bg5,
//         ]);
//         imgsArr.push(JSON.stringify(base64Img));
//         if (k == imgPageArr.length - 1) {
//           resolve(imgsArr);
//         }
//       }
//     }
//   });
// }
// 绘制一个 无畏契约 详情图
// 生成详情图-无畏契约 多图

export async function makeDetailImgWWQY(data, skins, attrs) {
  return new Promise(async (resolve, reject) => {
    // 处理实名
    let shimingList = attrs.filter((i) => {
      return i.aavName == "f1";
    });
    let sm = "";
    if (shimingList.length && data.f1) {
      sm = shimingList[0].childAttributes.filter((i) => {
        return i.id == data.f1;
      });
    }
    data.sm = sm && sm.length ? sm[0].fieldName : "--";
    // 定义一个整体图片的数组
    let imgPageArr = [];
    let commonIndex = 0; //定义一个全局的皮肤数
    let imgNUm = -1; //图片页数  数量
    let typeArrNum = -1; //每页图的分组数量
    let ispage = false //是否达到分页的皮肤数
    // 双重循环 遍历所有皮肤
    for (let i = 0; i < skins.length; i++) {
      // 遍历不同类型的皮肤
      const typeMap = skins[i];
      if (typeMap.list.length > 0) {
        typeMap.list.sort((a, b) => b.kz1 - a.kz1);
        for (let j = 0; j < typeMap.list.length; j++) {
          // 遍历到皮肤
          let skin = typeMap.list[j];
          // 本次遍历不绘制  只将每张图片的内容区分开
          if (commonIndex === 0) {
            typeArrNum = -1;
            imgPageArr = [[]];
            // imgPageArr[0].push({
            //   typeName: typeMap.name,
            //   skins: [],
            // });
            imgNUm++;
            // typeArrNum++;
          }
          if(commonIndex % 70 == 0&&commonIndex!=0){
            ispage = true
          }
          if (ispage && commonIndex != 0&&j==0) {
            ispage = false
            typeArrNum = -1;
            imgPageArr.push([]);
            // imgPageArr[imgNUm + 1].push({
            //   typeName: typeMap.name,
            //   skins: [],
            // });
            imgNUm++;
            // typeArrNum++;
          } //达到分页条件 每张图片展示70个皮肤，10个皮肤时如果分组没分配完，等待分组分配完，也就是j==0

          if (j == 0 && !ispage) {
            // 分组开始  在分页中创建分组数组
            imgPageArr[imgNUm].push({
              typeName: typeMap.name,
              skins: [],
            });
            typeArrNum++;
          }
          if (skin.imgUrl) {
            imgPageArr[imgNUm][typeArrNum].skins.push(skin);
          } else {
            typeMap.list.splice(j, 1);
            j--;
            continue;
          }
          commonIndex++;
        }
      }
    }
    // 下载背景图
    let bg1 = await getURLBase64Image(
      "https://imgage.maimaihao.com/makeImg/wuWeiQiYue/skinbg1new.png"
    );
    let bg2 = await getURLBase64Image(
      "https://imgage.maimaihao.com/makeImg/wuWeiQiYue/skinbg2new.png"
    );
    let bg3 = await getURLBase64Image(
      "https://imgage.maimaihao.com/makeImg/wuWeiQiYue/skinbg3new.png"
    );
    let bg4 = await getURLBase64Image(
      "https://imgage.maimaihao.com/makeImg/wuWeiQiYue/skinbg4new.png"
    );
    let bg5 = await getURLBase64Image(
      "https://imgage.maimaihao.com/makeImg/wuWeiQiYue/skinbg5new.png"
    );

    

    // 绘制图片
    let imgsArr = [];
    if (imgPageArr && imgPageArr.length) {
      for (let k = 0; k < imgPageArr.length; k++) {
        let base64Img = await makeDetailImgWwqyOne(imgPageArr[k], data, [
          bg1,
          bg2,
          bg3,
          bg4,
          bg5,
        ],k);
        imgsArr.push(JSON.stringify(base64Img));
        if (k == imgPageArr.length - 1) {
          resolve(imgsArr);
        }
      }
    }
  });
}

async function makeDetailImgWwqyOne(typeArr, data, bgImgs,pageNum) {
  ////console.log("%c Line:203 🍌 typeArr", "color:#93c0a4", typeArr);
  // 先计算当前页图片的高度
  let lineHeight = 432;
  let herolineHeight = 696;
  let skinHeight = 0;
  let lineNum = 0;
  let herolineNum = 0;
  let skinNum = 0;
  if (typeArr && typeArr.length) {
    for (let i = 0; i < typeArr.length; i++) {
      let typeMap = typeArr[i];
      
      for (let j = 0; j < typeMap.skins.length; j++) {
        let url = typeMap.skins[j].imgUrl;
        if (url) {
          try {
            skinNum++;
            const temp = await getURLBase64Image(url);
            typeMap.skins[j].image = temp;
          } catch (error) {}
        } else {
          typeMap.skins.splice(j, 1);
          j--;
        }
      }
      
      if(typeMap.typeName=='英雄'||typeMap.typeName=='卡面'){
        herolineNum = herolineNum + Math.ceil(typeMap.skins.length / 6);
      }else{
        lineNum = lineNum + Math.ceil(typeMap.skins.length / 6);
      }
    }
  }
  skinHeight = Math.ceil(lineNum * lineHeight)+Math.ceil(herolineNum * herolineHeight) + typeArr.length * 190 + 1206 + 80; //所有皮肤 包括分类标题的高度  页头高度 页尾距离

  // 开始创建画布
  let y = 1210; //图的绘制时距离上端的距离
  let x = 64; //绘制皮肤时的x距离
  // 创建canvas实例
  const canvas = document.createElement("canvas");
  canvas.style.background = "#EDE9E5";
  const context = canvas.getContext("2d");
  canvas.width = 2560;
  canvas.height = Math.ceil(skinHeight);
  // // 下载分类名称背景
  // let typeNameBg = await getURLBase64Image(
  //   "https://imgage.maimaihao.com/makeImg/goodsDetailMakeImg/wwqy-subtitle-bg.png"
  // );
  //  // 下载主背景
  // let mainBgImg = await getURLBase64Image(
  //   "https://imgage.maimaihao.com/makeImg/goodsDetailMakeImg/wwqy-bg.png"
  // );
  // // 下载头部背景
  // let titleBg = await getURLBase64Image(
  //   "https://imgage.maimaihao.com/makeImg/goodsDetailMakeImg/wwqy-titlebg.png"
  // );
  // // 下载右上角装饰 
  // let hpjyrg = await getURLBase64Image(
  //   "https://imgage.maimaihao.com/makeImg/heping/hpjyrg.png"
  // );

  let typeNameBg = await getURLBase64Image(
    "https://imgage.maimaihao.com/makeImg/wuWeiQiYue/newDetail/titbg.png"
  );
  let titleBg = await getURLBase64Image(
    "https://imgage.maimaihao.com/makeImg/wuWeiQiYue/newDetail/detailImgTopbg2.png"
  );
  let herobg = await getURLBase64Image(
    "https://imgage.maimaihao.com/makeImg/wuWeiQiYue/newDetail/herobg.png"
  );
  let baseherobg = await getURLBase64Image(
    "https://imgage.maimaihao.com/makeImg/wuWeiQiYue/newDetail/herobasebg.png"
  );
  let baseskinbg = await getURLBase64Image(
    "https://imgage.maimaihao.com/makeImg/wuWeiQiYue/newDetail/skinbgbase.png"
  );


  // 开始绘制
 
  // 绘制背景图
  // context.drawImage(mainBgImg, 0, 0, canvas.width, canvas.height);
  
  // 填充标题文字
  // context.font = "bold 30px myFontruihei5";
  // context.fillStyle = "#fff"; // 文字填充颜色
  // // 头部标题 店铺名
  // context.fillText(
  //   `${data.gameName || "--"}`,
  //   canvas.width / 2 - (data.gameName.length * 30) / 2,
  //   50
  // );
  // 绘制右上角装饰 hpjyrg
  // context.drawImage(hpjyrg, 1482, 130, 5, 68);
  // 绘制主要区域的背景
  drawBgBorder(context, 0, 0, canvas.width, skinHeight, {
    radius: 0,
    borderWidth: 2,
    startColor: "#EDE9E5",
    endColor: "#EDE9E5",
    borderColor: "#EDE9E5",
  });
  // 绘制标题背景
  context.drawImage(titleBg, 0, 0, canvas.width, 2076);

  // 绘制头部的数据
  context.font = "bold 70px myFontruihei5";
  context.fillText(`编号: ${data.thirdId || "--"}`, 1114, 552);
  context.fillText(`区服: ${data.groupName || "--"}`, 1114, 678);
  context.fillText(`实名: ${data.sm || "--"}`, 1114, 804);
  context.fillText(`等级: ${data.f23 ? data.f23 : "--"}`, 1114, 930);
  context.fillText(`皮肤价值: ${data.f27 ? data.f27 : "--"}`, 1782, 552);
  context.fillText(`已用源晶点: ${data.f34 ? data.f34 : "--"}`, 1782, 678);
  context.fillText(`解锁英雄数: ${data.f35 ? data.f35 : "--"}`, 1782, 804);

  // 开始绘制皮肤
  if (typeArr && typeArr.length) {
    for (let i = 0; i < typeArr.length; i++) {
      let typeMap = typeArr[i];
      // 分组开始  先绘制分类标题图片和分类名
      if (i != 0) {
        if(typeArr[i-1].typeName=='英雄'||typeArr[i-1].typeName=='卡面'){
          y += herolineHeight;
        }else{
          y += lineHeight;
        }
      }
      context.drawImage(typeNameBg, 634, y, 1130, 144);
      context.font = "bold 56px myFontruihei5";
      context.fillStyle = "#ffffff"; // 文字填充颜色
      let name = typeMap.typeName || "其他";
      // let txtWidth = name.length * 28;
      context.fillText(` ${name}`, 634+216, y + 90);
      y += 190;
      x = 64;
      for (let j = 0; j < typeMap.skins.length; j++) {
        let skin = typeMap.skins[j];
        if (j % 6 == 0 ) {
          x = 64;
          if(typeMap.typeName!='英雄'&&typeMap.typeName!='卡面'){
            // 方图
            // 绘制一行6个基础背景图
            if(j != 0){
              y += lineHeight
            }
            let rowx = x
            for (let l = 0; l < 6; l++){
              context.drawImage(baseskinbg, rowx, y, 368, 384);
              rowx+=416
            }
          }else{
            // 长图
            if(j != 0){
              y += herolineHeight
            }
             // 绘制一行6个基础背景图
             let rowx = x
             for (let l = 0; l < 6; l++){
               context.drawImage(baseherobg, rowx, y, 368, 648);
               rowx+=416
             }
          }
          
        }
        // 绘制每张图中的皮肤
        if (skin.image) {
          // 绘制背景图
          context.fillStyle = "#333"; // 文字填充颜色
          context.font = "bold 34px Adobe Ming Std";
          if(typeMap.typeName=='英雄'||typeMap.typeName=='卡面'){
            // 高图
            context.drawImage(herobg, x, y, 368, 648);
            context.drawImage(skin.image, x + 10, y + 10, 348, 550);
            context.fillText(
              ` ${skin.fieldName ? skin.fieldName : "未知"}`,
              x+20,
              y + 600
            );
            x += 416;
          }else{
            // 方图
            
            if (skin.kz1 && (bgImgs[skin.kz1 - 1] || bgImgs[skin.kz1 - 1] == 0)) {
              const bg = bgImgs[skin.kz1 - 1];
              context.drawImage(bg, x, y, 368, 384);
            }
            if(typeMap.typeName=='喷漆'||typeMap.typeName=='挂饰'){
              context.drawImage(skin.image, x + 30, y + 30, 308, 308);
            }else{
              context.drawImage(skin.image, x + 20, y + 100, 348, 200);
              context.fillText(
                ` ${skin.fieldName ? skin.fieldName : "未知"}`,
                x+20,
                y + 360
              );
            }
            x += 416;
          }
          
        }
      }
    }
  }
  return canvas.toDataURL("image/jpeg", 0.6);
}


// async function makeDetailImgWwqyOne(typeArr, data, bgImgs) {
//   ////console.log("%c Line:203 🍌 typeArr", "color:#93c0a4", typeArr);
//   // 先计算当前页图片的高度
//   let lineHeight = 160;
//   let skinHeight = 0;
//   let lineNum = 0;
//   let skinNum = 0;
//   if (typeArr && typeArr.length) {
//     for (let i = 0; i < typeArr.length; i++) {
//       let typeMap = typeArr[i];
//       lineNum = lineNum + Math.ceil(typeMap.skins.length / 7);
//       for (let j = 0; j < typeArr[i].skins.length; j++) {
//         let url = typeArr[i].skins[j].imgUrl;
//         if (url) {
//           try {
//             skinNum++;
//             const temp = await getURLBase64Image(url);
//             typeArr[i].skins[j].image = temp;
//           } catch (error) {}
//         } else {
//           typeArr[i].skins.splice(j, 1);
//           j--;
//         }
//       }
//     }
//   }
//   skinHeight = Math.ceil(lineNum * lineHeight) + typeArr.length * 60 + 100 + 80; //所有皮肤 包括分类标题的高度  页尾距离
//   //console.log("%c Line:217 🍪 skinHeight", "color:#fca650", skinHeight);

//   // 开始创建画布
//   let y = 140; //图的绘制时距离上端的距离
//   let x = 47; //绘制皮肤时的x距离
//   // 创建canvas实例
//   const canvas = document.createElement("canvas");
//   canvas.style.background = "#ffffff";
//   const context = canvas.getContext("2d");
//   canvas.width = 1500;
//   canvas.height = Math.ceil(skinHeight);
//   context.font = "40px myFontruihei5";
//   // 下载分类名称背景
//   let typeNameBg = await getURLBase64Image(
//     "https://imgage.maimaihao.com/makeImg/goodsDetailMakeImg/wwqy-subtitle-bg.png"
//   );
//    // 下载主背景
//   let mainBgImg = await getURLBase64Image(
//     "https://imgage.maimaihao.com/makeImg/goodsDetailMakeImg/wwqy-bg.png"
//   );
//   // 下载头部背景
//   let titleBg = await getURLBase64Image(
//     "https://imgage.maimaihao.com/makeImg/goodsDetailMakeImg/wwqy-titlebg.png"
//   );
//   // 下载右上角装饰 
//   let hpjyrg = await getURLBase64Image(
//     "https://imgage.maimaihao.com/makeImg/heping/hpjyrg.png"
//   );
//   // 开始绘制
 
//   // 绘制背景图
//   context.drawImage(mainBgImg, 0, 0, canvas.width, canvas.height);
//   // 绘制标题背景
//   context.drawImage(titleBg, 0, 0, canvas.width, 100);
//   // 填充标题文字
//   context.font = "bold 30px myFontruihei5";
//   context.fillStyle = "#fff"; // 文字填充颜色
//   // 头部标题 店铺名
//   context.fillText(
//     `${data.gameName || "--"}`,
//     canvas.width / 2 - (data.gameName.length * 30) / 2,
//     50
//   );
//   // 绘制右上角装饰 hpjyrg
//   context.drawImage(hpjyrg, 1482, 130, 5, 68);
//   // 绘制主要区域的背景
//   drawBgBorder(context, 30, 130, canvas.width - 60, skinHeight - 150, {
//     radius: 12,
//     borderWidth: 2,
//     startColor: "rgba(158, 78, 78, 0.6)",
//     endColor: "rgba(39, 9, 9, 0.6)",
//     borderColor: "#FDF4E8",
//   });

//   //
//   // 开始绘制皮肤
//   if (typeArr && typeArr.length) {
//     for (let i = 0; i < typeArr.length; i++) {
//       let typeMap = typeArr[i];
//       for (let j = 0; j < typeMap.skins.length; j++) {
//         let skin = typeMap.skins[j];
//         if (j == 0) {
//           // 分组开始  先绘制分类标题图片和分类名
//           if (i != 0) {
//             y += lineHeight;
//           }
//           context.drawImage(typeNameBg, 0, y - 100, 337, 229);
//           context.font = "28px myFontruihei5";
//           context.fillStyle = "#ffffff"; // 文字填充颜色
//           let name = typeMap.typeName || "其他";
//           // let txtWidth = name.length * 28;
//           context.fillText(` ${name}`, 60, y + 25);
//           y += 60;
//           x = 47;
//         }
//         if (j % 7 == 0 && j != 0) {
//           x = 47;
//           y += lineHeight;
//         }
//         // 绘制每张图中的皮肤
//         if (skin.image) {
//           // 绘制背景图
//           if (skin.kz1 && (bgImgs[skin.kz1 - 1] || bgImgs[skin.kz1 - 1] == 0)) {
//             const bg = bgImgs[skin.kz1 - 1];
//             // console.log("%c Line:223 🌭 bg", "color:#f5ce50", bg);
//             context.drawImage(bg, x, y, 184, 100);
//           }
//           context.drawImage(skin.image, x + 10, y + 10, 164, 80);
//           context.fillStyle = "#fff"; // 文字填充颜色
//           context.font = "20px myFontruihei5";
//           context.fillText(
//             ` ${skin.fieldName ? skin.fieldName : "未知"}`,
//             x,
//             y + 130
//           );
//           x += 204;
//         }
//       }
//     }
//   }
//   return canvas.toDataURL("image/jpeg", 0.8);
// }


// 带皮肤背景图 绘制图片 绘制一个区域的多张图片  单页 可带名称  cf 和平
export function drawImagesAreaBg(context, imgs, options) {
  // startX,startY,rowNum,borderImg,imgWidth1,imgHeight,stepY,stepX
  if (imgs && imgs.length) {
    ////console.log("%c Line:590 🍕 imgs", "color:#f5ce50", imgs);
    let i = 0;
    let line = 1;
    let startX = options.startX;
    let startY = options.startY;
    let hideTxt = options.hideTxt || false;
    let defaultSkinbg = options.defaultSkinbg || false;
    let stepY = options.stepY || 80;
    let stepX = options.stepX || 40;
    let txtLineHeight = options.txtLineHeight || 50;
    let txtInside = options.txtInside || false;
    let imgWidth = options.imgWidth1 || 222;
    let height = options.imgHeight || 300;
    let bgImgs = options.bgImgs || [];
    let gameId = options.gameId || '';
    let y = startY + height + txtLineHeight / 2;
    if (txtInside) {
      y = startY + height;
    }
    let imgy = startY;
    imgs.forEach((item) => {
      if ((i + 1) % (options.rowNum + 1) == 0) {
        if (txtInside) {
          imgy = imgy + stepY + height;
          y = imgy + height;
        } else {
          imgy = imgy + stepY + height + txtLineHeight;
          y = imgy + height + txtLineHeight / 2;
        }

        line++;
        i = 0;
      }
      
      // 绘制背景图
      if (item.lv && bgImgs[item.lv - 1]) {
        const bg = bgImgs[item.lv - 1];
        // console.log("%c Line:223 🌭 bg", "color:#f5ce50", bg);
        context.drawImage(
          bg,
          startX + (imgWidth + stepX) * i,
          imgy,
          imgWidth,
          height
        );
      } else {
        // https://imgage.maimaihao.com/makeImg/defaultSkinbg.png
        if (defaultSkinbg) {
          if(txtInside){
            context.fillStyle = "#333";
          }else{
            context.fillStyle = "#fff";
          }
          
          context.drawImage(
            defaultSkinbg,
            startX + (imgWidth + stepX) * i,
            imgy,
            imgWidth,
            height
          );
        }
      }

      // 保持宽高比
      // const originalWidth = item.image.naturalWidth;
      // const originalHeight = item.image.naturalHeight;
      // const targetWidth = imgWidth;
      // const targetHeight = targetWidth * (originalHeight / originalWidth);
      if (txtInside) {
        context.drawImage(
          item.image,
          startX + (imgWidth + stepX) * i + 20,
          imgy+80 ,
          imgWidth - 40,
          height - 150
        );
      } else {
        context.drawImage(
          item.image,
          startX + (imgWidth + stepX) * i + 15,
          imgy + 15,
          imgWidth - 30,
          height - 30
        );
      }
      

      //  if(item.lv){
      //   context.fillText(item.lv, startX + (imgWidth + stepX) * i, imgy+20);
      // }
      if (!hideTxt) {
        if (txtInside) {
          context.fillText(
            item.name,
            startX + (imgWidth + stepX) * i + 20,
            y - 20
          );
        } else {
          context.fillText(
            item.name,
            startX + (imgWidth + stepX) * i + 15,
            y + 13
          );
        }
      }
      // 右上角等级
      // if(gameId==2&&item.kz2){
      //   context.fillStyle = "#333";
      //   context.fillText(
      //     item.kz2+'级',
      //     startX + (imgWidth + stepX) * i + imgWidth -50,
      //     imgy+30
      //   );
        
      // }
      i++;
    });
    return context;
  } else {
    return context;
  }
}
